<!-- 评教管理：课堂教学质量评价汇总：数据汇总 -->
<template>
  <div>
    <el-form label-suffix="：" label-position="left" style="display: flex;">
      <el-form-item label-width="55px" label="学期">
        <el-select v-model="queryForm.semester" size="mini" placeholder="请选择学期" style="margin: 0 20px 0 -15px;">
          <el-option v-for="(item, index) in semesterList" :key="index" :label="item.xqmc" :value="item.xqmc" />
        </el-select>
      </el-form-item>
      <el-form-item label-width="85px" label="培养层次">
        <el-select v-model="queryForm.level" size="mini" clearable placeholder="请选择培养层次" style="margin: 0 20px 0 -15px;">
          <el-option v-for="(item, index) in levelList" :key="index" :label="item.dictValue" :value="item.dictKey" />
        </el-select>
      </el-form-item>
      <el-form-item label-width="55px" label="职称">
        <el-select v-model="queryForm.position" size="mini" clearable placeholder="请选择职称" style="margin: 0 20px 0 -15px;">
          <el-option v-for="(item, index) in positionList" :key="index" :label="item.dictValue" :value="item.dictValue" />
        </el-select>
      </el-form-item>
      <el-form-item label-width="40px" label="系">
        <el-select v-model="queryForm.department" size="mini" clearable placeholder="请选择系" style="margin: 0 20px 0 -15px;" @change="handleChangeDepartment">
          <el-option v-for="(item, index) in departmentList" :key="index" :label="item.deptName" :value="item.deptName" />
        </el-select>
      </el-form-item>
      <el-form-item label-width="70px" label="教研室">
        <el-select v-model="queryForm.office" size="mini" clearable placeholder="请选择教研室" style="margin: 0 20px 0 -15px;">
          <el-option v-for="(item, index) in officeList" :key="index" :label="queryForm.department === '' ? item.deptName : item.value" :value="queryForm.department === '' ? item.deptName : item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label-width="85px" label="上课教员">
        <el-input v-model="queryForm.teacherName" size="mini" clearable placeholder="请输入上课教员" style="margin: 0 20px 0 -15px;" />
      </el-form-item>
      <div class="button-style" style="margin-top: 6px;" @click="handleSearch">
        <img src="@/assets/assessment/icon-search.png" alt="" />
        <span>查询</span>
      </div>
      <div class="button-style" style="width: 70px; margin: 6px 0 0 15px; border-color: #f3b815; background-color: #fff6ef;" @click="handleRelease">
        <span style="color: #f3b815;">发布</span>
      </div>
    </el-form>
    <el-table
      border
      :data="tableData"
      :span-method="handleRowSpan"
      @selection-change="handleSelectionChange"
      class="xpaas-table-class"
      row-class-name="xpaas-row-class"
      cell-class-name="xpaas-cell-class"
      header-row-class-name="xpaas-header-row-class"
      header-cell-class-name="xpaas-header-cell-class">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column prop="zhiwei" label="培养层次" show-overflow-tooltip align="center" />
      <el-table-column prop="zhiweilevel" label="职称" show-overflow-tooltip align="center" />
      <el-table-column prop="xi" label="系" show-overflow-tooltip align="center" />
      <el-table-column prop="jyroom" label="教研室" show-overflow-tooltip align="center" />
      <el-table-column prop="teachername" label="教员姓名" show-overflow-tooltip align="center" />
      <el-table-column prop="cdkc" label="承担课程" show-overflow-tooltip align="center" />
      <el-table-column prop="zybc" label="教学班" show-overflow-tooltip align="center" />
      <el-table-column prop="cdxs" label="承担学时" show-overflow-tooltip align="center" />
      <el-table-column prop="tolxs" label="总学时" show-overflow-tooltip align="center" />
      <el-table-column prop="ddtkfs" label="督导听课分数" show-overflow-tooltip align="center" />
      <el-table-column prop="ddtkavg" label="督导听课平均分" show-overflow-tooltip align="center" />
      <el-table-column show-overflow-tooltip align="center">
        <template slot="header" slot-scope="scope">
          <el-checkbox v-model="check1" />
          <span>同行评价等级</span>
        </template>
        <template slot-scope="scope">
          <span>{{ scope.row.thpjdj }}</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip align="center">
        <template slot="header" slot-scope="scope">
          <el-checkbox v-model="check2" />
          <span>同行评分</span>
        </template>
        <template slot-scope="scope">
          <span>{{ scope.row.thpf }}</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip align="center">
        <template slot="header" slot-scope="scope">
          <el-checkbox v-model="check3" />
          <span>专家评价等级</span>
        </template>
        <template slot-scope="scope">
          <span>{{ scope.row.zjpjdj }}</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip align="center">
        <template slot="header" slot-scope="scope">
          <el-checkbox v-model="check4" />
          <span>专家评分</span>
        </template>
        <template slot-scope="scope">
          <span>{{ scope.row.zjpf }}</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip align="center">
        <template slot="header" slot-scope="scope">
          <el-checkbox v-model="check5" />
          <span>学员评教等级</span>
        </template>
        <template slot-scope="scope">
          <span>{{ scope.row.xypjdj }}</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip align="center">
        <template slot="header" slot-scope="scope">
          <el-checkbox v-model="check6" />
          <span>学员评教分数</span>
        </template>
        <template slot-scope="scope">
          <span>{{ scope.row.xypf }}</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip align="center">
        <template slot="header" slot-scope="scope">
          <el-checkbox v-model="check7" />
          <span>总评分</span>
        </template>
        <template slot-scope="scope">
          <span>{{ scope.row.tolf }}</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="button-style" style="width: auto; margin-top: 15px; border-color: #f3b815; background-color: #fff6ef;">
      <img src="@/assets/assessment/icon-export.png" />
      <download-excel
        :data="tableData"
        :fields="jsonFields"
        type="xls"
        name="课堂教学质量评价数据汇总.xls"
        style="color: #f3b815;">
        <span>导出Excel</span>
      </download-excel>
    </div>
    <div style="float: right; margin-top: 15px; padding-bottom: 15px;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="padding: 0;">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { reqGetXqList, reqCheckLevelList, queryDictByCode } from '@/api/admin1/check'
import { getxb, getClass, queryXBclassroom } from '@/api/course/courses'
import { querySummaryList, batchRelease } from '@/api/teachingEvaluation/summary'
export default {
  data() {
    return {
      pageNo: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      teacherId: '',
      queryForm: {
        semester: '',
        level: '',
        position: '',
        department: '',
        office: '',
        teacherName: ''
      },
      selection: [],
      semesterList: [],
      levelList: [],
      positionList: [],
      departmentList: [],
      officeList: [],
      check1: false,
      check2: false,
      check3: false,
      check4: false,
      check5: false,
      check6: false,
      check7: false,
      jsonFields: {
        培养层次: 'zhiwei',
        职称: 'zhiweilevel',
        系: 'xi',
        教研室: 'jyroom',
        教员姓名: 'teachername',
        承担课程: 'cdkc',
        教学班: 'zybc',
        承担学时: 'cdxs',
        总学时: 'tolxs',
        督导听课分数: 'ddtkfs',
        督导听课平均分: 'ddtkavg',
        同行评价等级: 'thpjdj',
        同行评分: 'thpf',
        专家评价等级: 'zjpjdj',
        专家评分: 'zjpf',
        学员评价等级: 'xypjdj',
        学员评教分数: 'xypf',
        总评分: 'tolf'
      }
    }
  },
  mounted() {
    reqGetXqList().then(res => {
      if (res.data.data && res.data.data.length > 0) {
        this.semesterList = res.data.data
        this.queryForm.semester = res.data.data[0].xqmc
      }
    })
    reqCheckLevelList().then(res => {
      if(res.data.data && res.data.data.length > 0){
        this.levelList = res.data.data[0].children
      }
    })
    queryDictByCode('zhiweilevel').then(res => {
      if (res.data.data && res.data.data.length > 0) {
        this.positionList = res.data.data[0].childdictBizs
      }
    })
    getxb().then(res => {
      if (res.data.data && res.data.data.length > 0) {
        this.departmentList = res.data.data
      }
    })
    getClass().then(res => {
      if (res.data.data && res.data.data.length > 0) {
        this.officeList = res.data.data
      }
      this.handleSearch()
    })
  },
  methods: {
    handleSearch: function () {
      const params = {
        xueqi: this.queryForm.semester,
        zhiwei: this.queryForm.level,
        zhiweilevel: this.queryForm.position,
        xi: this.queryForm.department,
        jyroom: this.queryForm.office,
        teachername: this.queryForm.teacherName,
        current: this.pageNo,
        size: this.pageSize
      }
      querySummaryList(params).then(res => {
        if (res.data.data) {
          this.tableData = res.data.data.records
          this.total = res.data.data.total
          let array
          this.teacherId = ''
          this.spanArray = []
          this.tableData.forEach((record, index) => {
            // 记录合并行的起始行号
            if (this.teacherId !== record.teacherid) {
              this.teacherId = record.teacherid
              this.spanArray.push(index)
            }
            // 合并行的依据：各职称下等级数量
            array = this.tableData.filter(item => {
              return item.teacherid === record.teacherid
            })
            record.rowSpan = array.length
          })
        } else {
          this.tableData = []
          this.total = 0
        }
      })
    },
    handleRelease: function () {
      if (this.selection.length === 0) {
        this.$message({
          message: '请选择要发布的数据！',
          type: 'warning'
        })
      } else {
        let list = []
        let record
        this.selection.forEach(item => {
          record = {
            id: item.id,
            sftj: '3',
            thpjdjstate: this.check1 ? '是' : '否',
            thpfstate: this.check2 ? '是' : '否',
            zjpjdjstate: this.check3 ? '是' : '否',
            zjpfstate: this.check4 ? '是' : '否',
            xypjdjstate: this.check5 ? '是' : '否',
            xypfstate: this.check6 ? '是' : '否',
            tolfstate: this.check7 ? '是' : '否'
          }
          list.push(record)
        })
        batchRelease(list).then(res => {
          if (res.data.code === 200) {
            this.check1 = false
            this.check2 = false
            this.check3 = false
            this.check4 = false
            this.check5 = false
            this.check6 = false
            this.check7 = false
            this.handleSearch()
            this.$message({
              message: '汇总数据发布成功！',
              type: 'success'
            })
          } else {
            this.$message({
              message: '汇总数据发布失败！',
              type: 'warning'
            })
          }
        })
      }
    },
    handleChangeDepartment: function (val) {
      this.queryForm.office = ''
      if (val === '') {
        getClass().then(res => {
          if (res.data.data && res.data.data.length > 0) {
            this.officeList = res.data.data
          }
        })
      } else {
        queryXBclassroom(val).then(res => {
          if (res.data.data && res.data.data.length > 0) {
            this.officeList = res.data.data
          }
        })
      }
    },
    handleRowSpan: function ({ row, rowIndex, columnIndex }) {
      if (columnIndex <= 5 || columnIndex === 9 || columnIndex >= 11) {
        if (this.spanArray.indexOf(rowIndex) >= 0) {
          return {
            rowspan: row.rowSpan,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    },
    handleSelectionChange: function (val) {
      this.selection = []
      let array = []
      let list
      val.forEach(item => {
        array.push(item.teacherid)
      })
      const array1 = [...new Set(array)]
      array1.forEach(item => {
        list = this.tableData.filter(record => {
          return record.teacherid === item
        })
        list.forEach(item1 => {
          this.selection.push(item1)
        })
      })
    },
    handleCurrentChange: function (val) {
      this.pageNo = val
      this.handleSearch()
    },
    handleSizeChange: function (val) {
      this.pageSize = val
      this.handleSearch()
    }
  }
}
</script>

<style lang="less" scoped>
  .button-style {
    float: left;
    background: #f1f8fe;
    border: 1px solid #51aef6;
    width: 80px;
    height: 28px;
    line-height: 28px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    box-sizing: border-box;
    > img {
      width: 16px;
      height: 16px;
      margin-right: 5px;
    }
    > span {
      font-size: 14px;
      color: #51aef6;
    }
  }
  @fontFamily:"Microsoft YaHei";
  .xpaas-table-class {
    border: 1px solid #004ca7;
    border-radius: 9px;
    ::v-deep div.el-table__header-wrapper {
      table.el-table__header {
        thead {
          tr.xpaas-header-row-class {
            padding: 0;
            height: 60px;
            background-color: #edf2f9;
            font-size: 16px;
            font-family: @fontFamily;
            font-weight: bold;
            line-height: 20px;
            color: #004ca7;
            th.xpaas-header-cell-class {
              font-weight: bold;
              border-right: 1px solid #c7d7eb;
              border-left: 0;
              border-bottom: 1px solid #c7d7eb;
              background-color: #edf2f9;
              div.cell {
                font-size: 16px;
                font-weight: bold;
                font-family: @fontFamily;
                color: #004ca7;
              }
            }
          }
        }
      }
    }
    ::v-deep div.el-table__body-wrapper {
      table.el-table__body {
        tbody {
          tr.xpaas-row-class {
            td.xpaas-header-cell-class {
              border-right: 1px solid #c7d7eb;
              border-left: 0;
              border-bottom: 1px solid #c7d7eb;
              background-color: #edf2f9;
              div.cell {
                font-size: 16px;
                font-weight: bold;
                font-family: @fontFamily;
                color: #004ca7;
              }
            }
            td.xpaas-cell-class {
              height: 60px;
              border-right: 1px solid #c7d7eb;
              border-left: 0;
              border-bottom: 1px solid #c7d7eb;
              div.cell {
                font-family: @fontFamily;
                color: #004ca7;
              }
            }
          }
        }
      }
    }
  }
  /deep/ .el-form-item__label {
    color: #004ca7;
    font-size: 14px;
  }
</style>
